<template>
	<div class="registerStep">
		<div class="container">
			<div class="rows">
				<div class="title">基础信息</div>
				<div class="row">
					<div class="label">单位性质</div>
					<picker @change="companyTypeChange" :value="companyTypeSelectedIdx" range-key="text" :range="companyTypes">
						<div class="value">
							<input :value="companyTypeSelectedText" disabled placeholder="请选择单位性质" />
							<uni-icons type="down" size="30rpx" color="#8f939c"></uni-icons>
						</div>
					</picker>
				</div>
				<div class="row">
					<div class="label">单位名称</div>
					<div class="value">
						<input type="text" v-model="form.name" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">统一社会信用代码</div>
					<div class="value">
						<input type="text" v-model="form.code" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">法人代表</div>
					<div class="value">
						<input type="text" v-model="form.legalPerson" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">法人代表身份证号</div>
					<div class="value">
						<input type="idcard" v-model="form.legalPersonIdCard" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">法人代表联系电话</div>
					<div class="value">
						<input type="tel" v-model="form.legalPersonMobile" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">注册资金</div>
					<div class="value">
						<input type="digit" v-model="form.registeredCapital" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">注册地址</div>
					<div class="value">
						<input type="text" v-model="form.address" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">所属区域</div>
					<div class="value">
						<input type="text" v-model="form.dist" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">经营范围</div>
					<div class="value">
						<textarea v-model="form.content" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">开户银行</div>
					<div class="value">
						<input type="text" v-model="form.bankname" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">开户账号</div>
					<div class="value">
						<input type="text" v-model="form.banknum" placeholder="请输入" />
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="btn" @click="next">下一步</div>
			</div>
		</div>
		<safe-area></safe-area>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				companyTypes: [{
						text: "有限责任(公司)",
						value: "1",
					},
					{
						text: "股份有限(公司)",
						value: "2",
					},
					{
						text: "国有全资",
						value: "3",
					},
					{
						text: "集体全资",
						value: "4",
					},
					{
						text: "私有独资",
						value: "5",
					},
					{
						text: "私有合伙",
						value: "6",
					},
					{
						text: "私营有限责任(公司)",
						value: "7",
					},
				],
				form: {
					companyType: "",
					name: "",
					code: "",
					legalPerson: "",
					legalPersonIdCard: "",
					legalPersonMobile: "",
					registeredCapital: "",
					address: "",
					dist: "",
					content: "",
					bankname: "",
					banknum: "",
				},
			}
		},
		computed: {
			companyTypeSelectedIdx() {
				return this.companyTypes?.findIndex?.(x => x.value === this.form.companyType);
			},
			companyTypeSelectedText() {
				return this.companyTypes?.find?.(x => x.value === this.form.companyType)?.text || "";
			}
		},
		methods: {
			companyTypeChange(e) {
				this.form.companyType = this.companyTypes[Number(e.detail.value)].value;
			},
			next() {
				uni.navigateTo({
					url: '/pages/register/step2',
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.registerStep {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.container {
			flex: 1;
			width: 100%;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;

			.rows {
				width: 680rpx;
				display: flex;
				flex-direction: column;
				font-size: 26rpx;

				.title {
					padding: 32rpx 0;
					border-bottom: 1px solid $uni-border-2;
				}

				.row {
					box-sizing: border-box;
					border-bottom: 1px solid $uni-border-2;
					display: flex;
					align-items: center;

					.label {
						width: 4em;
						margin-right: 36rpx;
						flex-shrink: 0;
						height: 4em;
						display: flex;
						align-items: center;
					}

					picker {
						flex: 1;
						box-sizing: border-box;
					}

					.value {
						flex: 1;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						input {
							width: 0;
							height: 4em;
							padding: 0 20rpx !important;
							box-sizing: border-box;
							flex: 1;
						}

						textarea {
							width: 0;
							height: 200rpx;
							padding: 16rpx 20rpx !important;
							box-sizing: border-box;
							appearance: none;
							outline: none;
							flex: 1;
						}
					}
				}
			}

			.footer {
				width: 100%;
				padding: 50rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.btn {
					width: 480rpx;
					height: 80rpx;
					border-radius: 80rpx;
					background-color: $uni-primary;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>